Hold Shift to Check Multiple Checkboxes一次勾選多個

一個列表清單，使用者可以按住shift鍵，一次選取多個項目，可以從上到下多個選取，也可以從下到上．

另外多了一個可以增加清單的輸入功能，並判斷是否為空值就送出．

技巧點

1. e.preventDefault()

• 停止事件的預設發生事件．但事件還是會繼續傳遞(冒泡事件)

<form action="">
  <input id="test" type="checkbox">
</form>

const input = document.querySelector("#test");
input.addEventListener("click", (e) => e.preventDefault());

const form = document.querySelector("form");
form.addEventListener("submit", (e) => e.preventDefault());

• 上述的範例中，input的checkbox本身有預設的勾選事件，form表單也有預設的送出事件，當你不想要觸發此標籤本身預設的事件，就必須在監聽過程中，使用e.preventDefault()．

2. Element.append()

• 在指定的元素內，於最後一個項目插入你要的節點node、字串．Element為你要指定的元素，()是擺放你要插入的節點或字串．可以不只加入一個．範例如下：

<div class="parent">
  <p>123456789</p>
</div>
// 假設我已經有上面的dom結構

const parent = document.querySelector(".parent");
// 取到指定的元素，等等要在裡面插入新內容．

const div = document.createElement("div");
const img = "<img src='https://picsum.photos/200/300' alt='dog'>";
// img是我想要新增加的節點

div.innerHTML = img;
// html語法設定

parent.append(div);
//將他插入到parent的結構中


// 結果如下
<div class="parent">
  <p>123456789</p>
  <div>
    <img src='https://picsum.photos/200/300' alt='dog'>
  </div>
</div>

• 利用這樣的方式，就可以動態生成dom結構

3. Element.insertAdjacentHTML(position, text)

• 跟上面類似的功能，但更簡潔．在指定的Element元素內，插入你要的html結構，可以省略掉innerHTML的步驟．
• position選擇你要插入在Element元素中的哪個位置，text是你要加入的節點或字串．範例如下：

<div class="parent">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, ratione.</p>
</div>

const parent = document.querySelector(".parent");
// 取到指定的元素，等等要在裡面插入新內容．

const img = "<img src='https://picsum.photos/200/300' alt='dog'>";
// img是我想要新增加的節點

parent.insertAdjacentHTML("beforeend", img);
// 插入到指定元素內，同append的功能

• insertAdjacentHTML方便之處在於它不只可以插入到指定元素的最後一個節點之後，可以選擇位置．可以從codepen去試試不同位置的dom結構如何變化．

4. e.shiftKey

• 當事件觸發的時候，可以知道使用者是否按著shift去觸發事件．本身是一個布林值，回傳true或false．

心得

按著shift鍵時，要判斷哪些區間都要變成checked，剛開始自己思考時，用了比較複雜的方式，雖然寫是寫出來但看了影片的做法，一種哇～～～原來可以這麼簡單